<template>
	<div class="container">
		<el-dialog
			title="物品归还"
			:visible.sync="showDialog_copy"
			class="main_dialog_copy dialog800"
			@closed="closed"
		>
			<el-form
				:inline="false"
				:model="mainform"
				class="demo-form-inline"
				ref="craftInfoRef"
				label-width="80px"
				key="userListFrom1"
			>
				<el-form-item label="用户名称" prop="uid">
					<change-user-input
						ref="changeUserInput"
						@sendValue="getUser"
						@clear="clearUid"
					></change-user-input>
				</el-form-item>
				<div class="goods_container_body main_taf main_table">
					<el-table
						ref="multipleTable"
						:data="mainform.list"
						v-loading="loading"
						element-loading-text="加载中"
						fit
						border
						highlight-current-row
					>
						<el-table-column label="序号" width="80">
							<template slot-scope="scope">{{ scope.$index + 1 }}</template>
						</el-table-column>
						<el-table-column
							label="物品名称"
							prop="goods_name"
							:show-overflow-tooltip="true"
						/>
						<el-table-column
							label="单位"
							prop="unit_title"
							:show-overflow-tooltip="true"
						>
						</el-table-column>

						<el-table-column label="借出数量" prop="num_advance">
						</el-table-column>
						<el-table-column
							label="归还数量"
							prop="num"
							:show-overflow-tooltip="true"
							min-width="160"
						>
							<template slot-scope="scope">
								<el-form-item
									label-width="10px"
									label=" "
									:prop="'list.' + scope.$index + '.num'"
								>
									<table-edit-input
										:number.sync="scope.row.num"
										:max="Number(scope.row.num_advance)"
									></table-edit-input>
								</el-form-item>
							</template>
						</el-table-column>

						<!-- <el-table-column
							label="管理操作"
							prop="name"
							width="160"
							align="center"
							fixed="right"
							:show-overflow-tooltip="true"
						>
							<template slot-scope="scope">
								<el-link @click="handeleDel(scope.row, scope.$index)"
									>删除</el-link
								>
							</template>
						</el-table-column>-->
					</el-table>
				</div>
					<el-form-item label="备注" prop="remark">
					<el-input
						type="textarea"
						style="max-width: 400px"
						:rows="2"
						placeholder="请输入内容"
						v-model="mainform.remark"
					>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showDialog_copy = false">取消</el-button>
				<el-button type="primary" v-repeatClick @click="handleComfrim">提交</el-button>
			</div></el-dialog
		>
	</div>
</template>
<script>
	import rules from "@/rules/warehouse/turnoverGoods/recordLend.js";
	import tableEditInput from "./tableEditInput.vue";
	import {
		turnoverOrder_getLend,
		turnoverOrder_add,
	} from "@/api/warehouse/warehouseTurnOrder.js";
	import { jsonStringifyBack } from "@/utils";

	export default {
		name: "",
		components: {
			tableEditInput,
		},
		props: {
			showDialog: {
				type: Boolean,
				default: false,
			},
			id: {
				type: Number | String,
				default: "",
			},
		},
		computed: {
			showDialog_copy: {
				get: function () {
					return this.showDialog;
				},
				set: function (newval) {
					this.$emit("update:showDialog", newval);
				},
			},
		},
		data() {
			return {
				rules: rules,
				mainform: {
					remark: "",
					list: [],
				},
				loading: false,
				textarea: "",
				formsp: {
					uid: "",
				},
			};
		},
		methods: {
			//获取用户信息
			getUser(data) {
				let uid = data.id;
				this.formsp.uid = uid;
				this.turnoverOrder_getLend();
			},
			// 清除用户的uid
			clearUid() {
				this.formsp.uid = "";
			},
			turnoverOrder_getLend() {
				this.loading = true;
				let data = {
					uid: this.formsp.uid,
				};
				turnoverOrder_getLend(data).then((res) => {
					if (res.errcode == 0) {
						res.data.list.map((e) => {
							e.goods_name = `${e.goods.name}【${e.goods_spu.spu_name.title}】`;
							e.unit_title = e.goods_spu.spu_unit.title;
							e.num_advance = e.num;
						});
						this.mainform.list = res.data.list;
					} else {
					}
					this.loading = false;
				});
			},
			handleComfrim() {
				let form = JSON.parse(JSON.stringify(this.mainform, jsonStringifyBack));
				let list = [];
				form.list.map((e) => {
					list.push({
						item_id: e.item_id,
						goods_spu_id: e.goods_spu_id,
						goods_id: e.goods_id,
						price: e.price,
						num: e.num,
					});
				});
				this.saveLoading = true;
				let data = {
					uid: this.formsp.uid,
					remark: form.remark,
					type: 2,
					list: JSON.stringify(list),
				};
				turnoverOrder_add(data).then((res) => {
					if (res.errcode == 0) {
						this.$message.success("添加成功");
						this.showDialog_copy = false;
						this.$emit("refresh");
					} else {
						this.$message.error(res.errmsg);
					}
					this.saveLoading = false;
				});
			},
			closed() {
				this.mainform.list = [];
				this.formsp.uid = "";
				this.mainform.remark = "";
				this.$refs["changeUserInput"].name = "";
			},
		},
	};
</script>
<style lang='scss' scoped>
.goods_container_header {
	display: flex;
	align-items: flex-start;
	.btns {
		padding-left: 10px;
	}
}
.goods_container_body {
	margin-bottom: 15px;
}
.main_table /deep/ .el-table--small td .cell {
	height: auto;
	.el-form-item--mini.el-form-item,
	.el-form-item--small.el-form-item {
		margin-top: 10px;
	}
}
.main_table /deep/ .el-table--small td {
	padding: 0;
}
.icon {
	margin-left: 5px;
	transform: translateY(1px);
}
</style>
